<template>
  <div class="charts_shadow" :style="{width:`${innerWidth *.313}px`}">
    <div class="until_title_charts">塔吊监控</div>
    <div class="monitor_info" style="width: 100%;height: 80%">
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{Math.round(towerInfo.totalNum)}}
        </div>
        <div class="monitor_item_des">日均投入塔吊</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe" v-if="towerInfo.totalRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(towerInfo.totalRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="towerInfo.totalRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-towerInfo.totalRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{towerInfo.workHourAvg}}
        </div>
        <div class="monitor_item_des">日均有效工时</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe"  v-if="towerInfo.workHourRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(towerInfo.workHourRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="towerInfo.workHourRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-towerInfo.workHourRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{towerInfo.dailyNumAvg}}
        </div>
        <div class="monitor_item_des">单台日均报警次数</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up warning" v-if="towerInfo.dailyNumRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(towerInfo.dailyNumRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down safe" v-if="towerInfo.dailyNumRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-towerInfo.dailyNumRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import {mapGetters} from 'vuex'
  export default {
    name: 'tower_monitor',
    mixins: [mixin],
    data () {
      return {
        towerInfo: {
          dailyNumAvg: 0,
          dailyNumRate: 0,
          totalNum: 0,
          totalRate: 0,
          workHourAvg: 0,
          workHourRate: 0
        }
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid) {
          this.getTowerCraneMonitorInfo()
        }
      }
    },
    mounted () {
      this.getTowerCraneMonitorInfo()
    },
    methods: {
      getTowerCraneMonitorInfo () {
        let data = {
          pjId: this.currentUser.pjId,
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getTowerCraneMonitorInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) {
            this.towerInfo.dailyNumAvg = 0
            this.towerInfo.dailyNumRate = 0
            this.towerInfo.totalNum = 0
            this.towerInfo.totalRate = 0
            this.towerInfo.workHourAvg = 0
            this.towerInfo.workHourRate = 0
            return
          }
          let data = res.data.data
          this.towerInfo.dailyNumAvg = data.dailyNumAvg
          this.towerInfo.dailyNumRate = data.dailyNumRate
          this.towerInfo.totalNum = data.totalNum
          this.towerInfo.totalRate = data.totalRate
          this.towerInfo.workHourAvg = data.workHourAvg
          this.towerInfo.workHourRate = data.workHourRate
        })
      }
    }
  }
</script>
